<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-04-09 22:16:59
 * @LastEditTime: 2024-04-09 23:56:20
 * @FilePath: \env-manager-pc\src\views\system\config\edit.vue
-->
<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-03-29 09:18:53
 * @LastEditTime: 2024-03-30 14:25:16
 * @FilePath: \env-manager-pc\src\views\system\access\edit.vue
-->
<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { CreateSubmitData, useInitForm, useRules } from './page'
import type { ModelOpen } from '@/types/page'
import { useEnvOrgs, useOwnerOrgs } from '@/utils/dataHook'
import { AccountType } from '@/api/modules/types/user'
import { ModelType } from '@/types/common'
import entApi from '@/api/modules/ent'

const { isOwnerOrg } = defineProps({
  isOwnerOrg: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['submit'])

const dialogVisible = ref(false)
const { formData, initForm } = useInitForm()
const formRef = ref<FormInstance>()
const btnLoading = ref(false)
const modelType = ref(ModelType.add)
const treeRef = ref()

const rules = useRules()
const isEdit = computed(() => modelType.value === ModelType.edit)

function open(options: ModelOpen) {
  modelType.value = options.type
  if (options.data) {
    Object.assign(formData.value, options.data)
    if (isEdit.value) {
      isOwnerOrg ? GetOwnerOrgUsableEnvOrg(formData.value.data.Code) : GetEnvOrgUsableOwnerOrg(formData.value.data.Code)
    }
  }
  dialogVisible.value = true
}

function GetEnvOrgUsableOwnerOrg(envOrgObjID: string) {
  entApi.GetEnvOrgUsableOwnerOrg({ envOrgObjID }).then((res) => {
    treeRef.value.setCheckedKeys(res || [])
  })
}
function GetOwnerOrgUsableEnvOrg(ownerOrgObjID: string) {
  entApi.GetOwnerOrgUsableEnvOrg({ ownerOrgObjID }).then((res) => {
    treeRef.value.setCheckedKeys(res || [])
  })
}

const title = computed(() => {
  return `${isOwnerOrg ? '运维公司' : '环保局'}${isEdit.value ? '编辑' : '新增'}`
})

function doLoading(flag: boolean) {
  btnLoading.value = flag
}

function submit() {
  formRef.value?.validate((vaild) => {
    if (vaild) {
      const checkKeys = treeRef.value.getCheckedKeys()
      const data = CreateSubmitData(isOwnerOrg ? AccountType.OwnerOrg : AccountType.EnvOrg, formData.value)
      emits('submit', data, checkKeys, doLoading)
    }
  })
}

function close() {
  dialogVisible.value = false
  btnLoading.value = false
  initForm()
  treeRef.value.setCheckedKeys([])
}

const options = isOwnerOrg ? useEnvOrgs() : useOwnerOrgs()

const defaultProps = {
  children: 'Children',
  label: 'Name',
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    :title="title"
    width="80%"
    top="1%"
    draggable
    @closed="close"
  >
    <div class="max-h-[65vh] w-full overflow-x-hidden overflow-y-auto">
      <ElForm ref="formRef" label-width="180px" label-position="top" label-suffix="：" :model="formData" :rules="rules">
        <ElRow :gutter="30">
          <ElCol :span="12">
            <ElFormItem label="名称" prop="data.Name">
              <ElInput v-model="formData.data.Name" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="全称" prop="data.FullName">
              <ElInput v-model="formData.data.FullName" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="可用环保局">
              <el-tree
                ref="treeRef"
                :data="options"

                node-key="Code"
                class="w-full"
                show-checkbox highlight-current
                :props="defaultProps"
              >
                <template #default="{ data }">
                  <span :title="data.FullName">{{ data.Name }}</span>
                </template>
              </el-tree>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
